<template>
  <div class="social-container">
    <div class="app-container">
      <div style="border: 1px solid #ccc; padding: 20px">
        {{ msg }}
        <!-- v-model是怎么实现的? :value + @input 组合实现 v-model指令的效果-->
        <!-- <son :msg="msg" @changeMsg="changeMsg" /> -->
        <!-- <son :value="msg" @input="changeMsg" /> -->
        <!-- 如果在组件上使用了v-model 子组件内部接收必须用value, 子传父发布的自定义事件必须是input
          v-model在组件上使用只能用一次, 如果传递多个属性还得按照传统的父传子 子传父来操作

          如果解决多个参数传递, 简写操作呢? .sync
          使用
          1. 父传子 :属性名.sync="值"
          2. 子组件接收 props: {属性名: {type:xx}}
          3. 子组件要子传父的时候 this.$emit('update:属性名', '修改的值')
          只要看到.sync修饰符 肯定是父子组件相互通信了
          Vue3中这个语法被移除了.sync 有对应的解决方案
        -->
        <son :msg.sync="msg" :num.sync="num" />
      </div>

    </div>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Social',
  components: { Son },
  data() {
    return {
      msg: '哈哈',
      num: 100
    }
  }

}
</script>

<style>

</style>
